import Vue from 'vue'
import App from './App.vue'
import router from './router'  // /index

Vue.config.productionTip = false

// 运行依赖 -S安装的 第三方插件，都在main.js入口函数中引入、注册
// 1、导入字体图标
import './assets/fonts/iconfont.css'

// 2、自创的文件夹-- 按需导入组件
import './plugins/element'
// 3、导入全局样式表
import './assets/css/global.css'

// 5、安装运行依赖后npm i vue-table-with-tree-grid -S 导入第三方树形表格
import TreeTable from 'vue-table-with-tree-grid'

// 6、全局格式化时间过滤器---方式1
// Vue.filter('dateFormat', function (originVal) {
//   const dt = new Date(originVal)

//   const y = dt.getFullYear()
//   const m = (dt.getMonth() + 1 + '').padStart(2, '0')
//   const d = (dt.getDate() + '').padStart(2, '0')

//   const hh = (dt.getHours() + '').padStart(2, '0')
//   const mm = (dt.getMinutes() + '').padStart(2, '0')
//   const ss = (dt.getSeconds() + '').padStart(2, '0')

//   return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
// })

// 在vue中使用moment.js(时间格式化插件)--方式2
// ①安装moment.js
// npm install moment --save

// ②导入时间过滤器插件，全局过滤器
// 全局方法（在vue实例挂载moment方法）
import moment from 'moment' 
// Vue.prototype.$moment = moment

// ③定义一个全局过滤器实现日期格式化
 Vue.filter('dateFormat',function (input,fmtstring) {
  // 当input为时间戳时，需转为Number类型
  // fmtstring,使用moment.js这个日期格式化类库实现日期的格式化功能--'YYYY-MM-DD HH:mm:ss'
  return moment(input).format(fmtstring);
});
 
// 安装富文本 npm install vue-quill-editor -S
//7、 （1）导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
//7、（2） 导入富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'





//4、配置全局的 axios 默认值
//（1）导入axios库，进行网络数据请求---
import axios from 'axios'
//（2）设置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
//（4）通过设置 axios 请求拦截器添加 token，保证拥有获取数据的权限。
// ①请求调用需要授权的 API接口 ，必须在请求头中添加使用 `Authorization` 字段提供 `token` 令牌
// ②拦截器,在请求或响应被 then 或 catch 处理前拦截它们。
// ③添加请求拦截器
axios.interceptors.request.use((config) => {
  // 在发送请求之前进行一些信息设置,config请求的信息
  // console.log(config);
  // 在发送请求之前，在请求头中添加-使用 `Authorization` 字段提供 `token` 令牌
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必须 return config，固定语法
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
})
// (3）全局挂载到Vue的原型对象上添加自定义属性，所有组件都可以用$this访问到http,去发起axios请求
Vue.prototype.$http = axios   // == this.$http == axios

//5、把第三方树形表格 注册为全局组件
Vue.component('tree-table', TreeTable)

//7、（3） 将富文本编辑器，注册为全局可用组件
Vue.use(VueQuillEditor)



new Vue({
  router,
  render: h => h(App)
}).$mount('#app')



/*
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
    从浏览器中创建 XMLHttpRequests
    从 node.js 创建 http 请求
    支持 Promise API
    拦截请求和响应
    转换请求数据和响应数据
    取消请求
    自动转换 JSON 数据
axios.get('http://localhost:3000/adata').then(function(ret){
  console.log(ret.data)
})

拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
*/